<template>
	<view>
		<view class="lunbo">
			<swiper class="swiper" indicator-active-color="#ffffff" indicator-color="rgba(255,255,255,.5)"
				:indicator-dots="true" :autoplay="true" :interval="3000" :duration="1500" :circular="true">
				<swiper-item v-for="(item,index) in list" @click="viewpicture(list)">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
						<view class="video-icon">
							{{index+1}}/{{list.length}}
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="vr-box" v-if="isvr == true" @click="govr(vrurl)">
				<view class="">
					<image src="/static/vr.png" mode=""></image>
				</view>
				<view class="text">
					parnorama
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "infoswiper",
		data() {
			return {

			};
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			isvr:{
				type:Boolean,
				default:false
			},
			vrurl:{
				type:String,
				default:''
			}
		},
		methods:{
			viewpicture(list) {
				uni.previewImage({
					urls: list,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			govr(url){
				uni.navigateTo({
					url:'/pages/VR/index?url='+url
				})
			},
		}
	}
</script>

<style lang="less">
	
	.lunbo {
		width: 100%;
		margin: 0 auto;
		z-index: 1;
		position: relative;
		.vr-box{
			background-color: rgba(0, 0, 0, .4);
			position: absolute;
			top: 20rpx;
			left: 0;
			padding: 0rpx 10rpx;
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			z-index: 3;
			display: flex;
			justify-content: space-between;
			.text{
				margin-left: 10rpx;
				color: #fff;
				font-size: 24rpx;
				padding-top: 3%;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				padding-top: 5rpx;
			}
		}
		.swiper {
			width: 100%;
			height: 600rpx;

			.swiper-item {
				border-radius: 20rpx;
				width: 100%;
				height: 100%;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.video-icon {
					background-color: rgba(0, 0, 0, .3);
					border-radius: 20rpx;
					padding: 4rpx 20rpx;
					color: #FFFFFF;
					position: absolute;
					bottom: 140rpx;
					right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 40rpx;
					}
				}
			}
		}
	}
</style>
